<template>
  <!-- <el-container> -->
  <!-- <el-main> -->
  <div>
    <el-row>
      <el-col :span="12">
        <!-- <h3>已选{{clientSelected.length}}人</h3> -->
      </el-col>
      <el-col :span="12" style="text-align:right">
        <!-- <el-button type="primary" @click="$emit('set',{clientSelected,rangeSelected})">确认</el-button> -->
      </el-col>
      <el-col :span="24">
        <!-- :collapse-tags="true" -->
        <el-cascader
          v-if="showCascader"
          :options="clientCascader"
          :props="{ multiple: true }"
          :show-all-levels="false"
          
          :filterable="true"
          v-model="clientSelected"
          @change="commit"
          :style="{ width: '100%', marginBottom: '1em' }"
        />
      </el-col>
      <el-col :span="24">
        <el-radio-group size="small" v-model="rangeSelected" @change="commit">
          <el-radio-button label="30days">近30天</el-radio-button>
          <el-radio-button label="90days">近90天</el-radio-button>
          <el-radio-button label="180days">近180天</el-radio-button>
          <el-radio-button label="365days">近365天</el-radio-button>
        </el-radio-group>
        <!-- <span style="float:right">
          <el-button size="mini" @click="interest" style="padding-left:1em">
            选择所有关注人员
          </el-button>
          <el-popconfirm
            title="确定除删所有已勾选人员吗？"
            @onConfirm="clearAll"
          >
            <el-button slot="reference" size="mini" style="padding-left:1em"
              >清空全部</el-button
            >
          </el-popconfirm>
        </span> -->
      </el-col>
    </el-row>
  </div>
  <!-- </el-main> -->
  <!-- </el-container> -->
</template>

<script>
export default {
  props: ["selected", "range"],
  computed: {
    clientCascader() {
      return this.$store.state.clientData.clientCascader;
    },
    clientList() {
      return this.$store.state.clientData.clientList;
    },
  },
  data() {
    return {
      clientSelected: [],
      rangeSelected: "180days",
      showCascader: true,
    };
  },
  methods: {
    clearAll() {
      this.clientSelected = [];
      this.commit();
      console.log("cleared all selected");
    },
    commit() {
      this.$emit("set", {
        clientSelected: this.clientSelected,
        rangeSelected: this.rangeSelected,
      });
      console.log("commited concern config");
    },
    loadStatus() {
      this.clientSelected = JSON.parse(JSON.stringify(this.selected));
      this.rangeSelected = JSON.parse(JSON.stringify(this.range));
    },
    load() {
      this.clientSelected = JSON.parse(JSON.stringify(this.selected));
      this.rangeSelected = JSON.parse(JSON.stringify(this.range));
    },
  },
  mounted() {
    this.clientSelected = JSON.parse(JSON.stringify(this.selected));
    this.rangeSelected = JSON.parse(JSON.stringify(this.range));
  },
};
</script>
